<template>
  <div class="source-list-wrapper">
    <ul class="sources">
      <li v-for="source in sources" :key="source.id">
        <source-card :source="source" class="source-card"></source-card>
      </li>
    </ul>
    <loading-card class="loading-card" ref="loading" :nomore=nomore></loading-card>
  </div>
</template>

<script>
import SourceCard from './BaseCom/PublishedSourceCard.vue'
import LoadingCard from '@c/utils/LoadingCard2.vue';

export default {
  components: {
    SourceCard,
    LoadingCard
  },
  data() {
    return {
      nomore: false
    }
  },
  props: {
    sources: {
      type: Array,
      default: () => ([])
    },
  },
  mounted() {
    this.$scrollLoad({
      loadingComponent: this.$refs.loading.$el,
      callback: entries => {
        let entry = entries[0];
        if(entry.isIntersecting) {
          let bl = this.sources.length;
          this.$emit('fetchSourceAbstracts');
          setTimeout(() => {
            let al = this.sources.length;

            if(al - bl < 10) {
              this.nomore = true;
            } else {
              this.nomore = false;
            }
          }, 1000);
        }
      }
    })
  }
}
</script>

<style scoped lang="less">
@w: var(--sourceListWidth);


  .source-list-wrapper {
    width: @w;
    background-color: white;
    border-radius: 3px;

    .category {
      --itemListHeight: 50px;
      --itemListWidth: calc(@w * 0.6);
      --itemNum: 3;
    }

    .sources > li {
      border-bottom: 1px solid var(--light);

      .source-card {
        --sourceCardWidth: 100%;
        --sourceCardHeight: 150px;
      }
    }

    .loading-card {
      --loadingCardWidth: @w;
      --loadingCardHeight: 200px;
    }
  }
</style>